<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item v-if="taskType == 0" style="font-size: 18px;" :to="{ path: '/HomeView/ContentRetrieval/TextRetrieval' }">文本检索</el-breadcrumb-item>
            <el-breadcrumb-item v-if="taskType == 1" style="font-size: 18px;" :to="{ path: '/HomeView/ContentRetrieval/ImageRetrieval' }">图像检索</el-breadcrumb-item>
            <el-breadcrumb-item style="font-size: 18px;">{{ taskName }}</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>

        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="关键词">
                <el-select v-model="valueKeywords" multiple allow-create default-first-option placeholder="请输入关键词"
                    no-data-text="输入后回车添加" style="width: 300px;">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="文件类型">
                <el-select v-model="valueFileType" multiple default-first-option placeholder="请选择文件类型"
                    style="width: 300px;">
                    <el-option v-for="item in optionsFileType" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="fileName" label="文件名称" align="center">
            </el-table-column>
            <el-table-column prop="fileType" label="文件类型" align="center">
            </el-table-column>
            <!-- <el-table-column prop="domainUrl" label="域名链接" align="center">
            </el-table-column> -->
            <!-- <el-table-column prop="fileSource" label="文件来源" align="center">
            </el-table-column> -->
            <el-table-column prop="keywords" label="关键词" align="center">
                <template #default="{ row }">
                    <span>{{ formatList(row.keywords) }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="simExtent" label="相关程度" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button @click="handleClickView(scope.row)" type="text" size="small">预览</el-button>
                    <el-button @click="handleClickDownload(scope.row)" type="text" size="small">下载</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="demo-image__preview">
            <el-image style="width: 100px; height: 100px; display: none;" :src="url" :preview-src-list="srcList"
                ref="preview">
            </el-image>
        </div>
        <el-dialog :visible.sync="pdfDialogVisible" fullscreen="true">
            <!-- 预览pdf -->
            <template>
                <vue-office-pdf :src="url" @rendered="rendered" />
            </template>
        </el-dialog>
        <el-dialog :visible.sync="xlsDialogVisible" width="1200px" fullscreen="true">
            <!-- 预览xls -->
            <template>
                <vue-office-excel :src="url" style="height: 100vh;" @rendered="rendered" />
            </template>
        </el-dialog>
    </div>
</template>

<script>
import axios from "axios";
import VueOfficePdf from '@vue-office/pdf'
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'
export default {
    components: {
        VueOfficePdf,
        VueOfficeExcel
    },
    mounted() {
        this.valueFileType = this.$route.params.fileType
        this.valueKeywords = this.$route.params.content
        this.taskType = this.$route.params.taskType
        for (var i = 0; i < this.content.length; i++) {
            this.options.push({ value: this.content[i], label: this.content[i] });
        }
        console.log(this.id);
        this.list();
    },
    methods: {
        async list() {
            console.log(this.valueKeywords)
            console.log(this.valueFileType)
            const param = {
                id: this.id,
                content: this.valueKeywords,
                taskType: this.taskType,
                fileType: this.valueFileType,
                taskId: this.taskId
            };
            await axios.post("/api/resultShow/list", param).then(res => {
                console.log(res.data)
                this.tableData = res.data.data;
            })
        },
        onSubmit() {
            console.log('submit!');
            this.list();
        },
        handleClickView(row) {
            this.url = '/data/1.pdf'
            console.log(row);
            if (row.fileType == "0" || row.fileType == "1" || row.fileType == "4") {
                // 预览图片
                this.onPreview();
            } else if (row.fileType == "excel") {
                // 预览xls
                this.xlsDialogVisible = true;
                console.log(this.url);
            } else if (row.fileType == "pdf") {
                // 预览pdf
                console.log("预览pdf");
                this.pdfDialogVisible = true;
            }
        },
        onPreview() {
            this.$refs.preview.clickHandler();
        },
        handleClickDownload(row) {
            console.log(row);
            let link = document.createElement("a"); //创建a标签
            link.style.display = "none"; //使其隐藏
            link.href = '/data/1.pdf'; //赋予文件下载地址
            link.setAttribute("download", row.fileName); //设置下载属性 以及文件名
            document.body.appendChild(link); //a标签插至页面中
            link.click(); //强制触发a标签事件
            this.$message({
                message: '下载成功！',
                type: 'success'
            });
        },
        formatList(list) {
            return list.join(';');
        }
    },
    data() {
        return {
            taskName: this.$route.params.taskName,
            id: this.$route.params.id,
            content: this.$route.params.content,
            taskType: this.$route.params.taskType,
            taskId: this.$route.params.taskId,
            tableData: [],
            formInline: {
                user: '',
                region: ''
            },
            optionsKeywords: [],
            optionsFileType: [{
                value: 'pdf',
                label: 'pdf'
            }, {
                value: 'word',
                label: 'word'
            }, {
                value: 'excel',
                label: 'excel'
            }, {
                value: 'png',
                label: 'png'
            }, {
                value: 'jpg',
                label: 'jpg'
            }],
            options: [],
            valueKeywords: [],
            valueFileType: [],
            url: '',
            srcList: [],
            pdfDialogVisible: false,
            xlsDialogVisible: false
        }
    }
}
</script>

<style></style>